<ng-content></ng-content>
<ng-template #tooltipTemplate>
  <div [ngClass]="['lv-' + type, 'lv-' + type + '-theme-' + lvTheme, 'lv-' + type + '-position-' + tipPosition, typeUtils.isRealString(lvContent) && type === 'popover' ? 'lv-popover-maxwidth' : '', lvShowArrow ? 'lv-' + type + '-show-arrow' : '']" [class]="lvClassName" [@showTip]="animationState" (@showTip.done)="onAnimationDone($event)">
    <div class="lv-{{ type }}-container">
      <div *ngIf="lvShowArrow" class="lv-{{ type }}-arrow"></div>
      <div class="lv-{{ type }}-inner">
        <ng-container *ngIf="type === 'tooltip'">
          <i *ngIf="lvIcon" class="lv-tooltip-icon">
            <svg class="lv-icon">
              <use attr.xlink:href="{{ '#' + lvIcon }}"></use>
            </svg>
          </i>

          <ng-container *ngIf="typeUtils.isRealString(lvContent)"><span>{{ lvContent }}</span></ng-container>
          <ng-container *ngIf="typeUtils.isTemplateRef(lvContent)">
            <ng-container *ngTemplateOutlet="lvContent; context: { $implicit: lvContextData }"></ng-container>
          </ng-container>
        </ng-container>

        <ng-container *ngIf="type === 'popover'">
          <i *ngIf="lvClosable" lv-icon="lv-icon-close" class="lv-popover-close" (click)="closeTooltip()"></i>
          <ng-container *ngTemplateOutlet="toolTipTemplateRef"></ng-container>
        </ng-container>

      </div>
    </div>
  </div>
</ng-template>

<ng-template #toolTipTemplateRef>
  <div [class.lv-has-closable]="lvClosable">
    <div class="lv-{{ type }}-header" *ngIf="lvHeader">
      <ng-container *ngIf="typeUtils.isRealString(lvHeader)">{{ lvHeader }}</ng-container>
      <ng-container *ngIf="typeUtils.isTemplateRef(lvHeader)">
        <ng-container *ngTemplateOutlet="lvHeader; context: { $implicit: lvContextData }"></ng-container>
      </ng-container>
    </div>
    <div class="lv-{{ type }}-content" *ngIf="lvContent" [class.lv-has-closable-distance]="lvClosable && !lvHeader">
      <ng-container *ngIf="typeUtils.isRealString(lvContent)">{{ lvContent }}</ng-container>
      <ng-container *ngIf="typeUtils.isTemplateRef(lvContent)">
        <ng-container *ngTemplateOutlet="lvContent; context: { $implicit: lvContextData }"></ng-container>
      </ng-container>
    </div>
    <div class="lv-{{ type }}-footer" *ngIf="lvFooter">
      <ng-container *ngIf="typeUtils.isRealString(lvFooter)">{{ lvFooter }}</ng-container>
      <ng-container *ngIf="typeUtils.isTemplateRef(lvFooter)">
        <ng-container *ngTemplateOutlet="lvFooter; context: { $implicit: lvContextData }"></ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>
